<template>
    <div class="login-register">
        <div class="logo">
            <img src="@/assets/logo.png" alt="">
        </div>
        <div class="tab">
            <span :class="{ 'active': currentTag === 'login' }" @click="changeTag('login')">登录</span>
            <span :class="{ 'active': currentTag === 'register' }" @click="changeTag('register')">注册</span>
        </div>
        <div class="login" v-if="currentTag === 'login'">
            <van-form @submit="onLogin">
                <van-cell-group inset>
                    <van-field v-model="username" name="username" label="用户名" placeholder="用户名"
                        :rules="[{ required: true, message: '请填写用户名' }]" />
                    <van-field v-model="password" type="password" name="password" label="密码" placeholder="密码"
                        :rules="[{ required: true, message: '请填写密码' }]" />
                </van-cell-group>
                <div style="margin: 16px;">
                    <van-button round block type="primary" native-type="submit">
                        登录
                    </van-button>
                </div>
            </van-form>

        </div>
        <div class="register" v-else>
            <van-form @submit="onRegister">
                <van-cell-group inset>
                    <van-field v-model="username" name="username" label="用户名" placeholder="用户名"
                        :rules="[{ required: true, message: '请填写用户名' }]" />
                    <van-field v-model="password" type="password" name="password" label="密码" placeholder="密码"
                        :rules="[{ required: true, message: '请填写密码' }]" />
                    <van-field v-model="verifyCode" type="text" name="verifyCode" label="验证码" placeholder="验证码"
                        :rules="[{ required: true, message: '请填写验证码' }]">
                        <template #button>
                                <verifyImg  ref="verifyImaRef" />
                        </template>
                    </van-field>
                </van-cell-group>
                <div style="margin: 16px;">
                    <van-button round block type="primary" native-type="submit">
                        注册
                    </van-button>
                </div>
            </van-form>
        </div>
    </div>
</template>

<script setup>
import verifyImg from "@/components/verifyCode.vue";
import { ref } from "vue";
import axios from '@/api/index.js'
import { showSuccessToast, showFailToast } from 'vant';
import { useRouter } from 'vue-router'

const router = useRouter()
const username = ref('');
const password = ref('');
const verifyCode = ref('');
const currentTag = ref('login');
const verifyImaRef = ref(null)
const onRegister = (values) => {
    console.log('submit', values);
 
    //发接口请求
    if (value.verifyCode === verifyImaRef.value.verifyCode) { //允许注册
        //将账号和密码发送给后端
        axios.post('/api/user/register',{
            username:values.username,
            password:values.password
        }) .then(res => {
            console.log(131);
            
            showSuccessToast(res.msg)
            currentTag.value = 'login';
            
        })
    }
    else{ 
        console.log('验证码错误');
        
    }
};

const onLogin = async(values) => {
    const res = await axios.post('/api/user/login',{
        username:values.username,
        password:values.password
    })
    localStorage.setItem('token',res.data.token)
    router.push('/home')
}

const changeTag = (tag) => {
    currentTag.value = tag
}
</script>

<style lang="less" scoped>
.logo {
    text-align: center;
}

.tab {
    display: flex;
    padding: 0.5rem 0.7rem;
    color: rgb(54, 169, 58);
    font-size: 0.5rem;
    font-weight: bold;

    span {
        margin-right: 0.6rem;
        padding: 5px 0;

        &.active {
            border-bottom: 3px solid rgb(54, 169, 58);
            font-size: 0.55rem;
        }
    }
}
</style>